<template>
    <div class="Manage">
        <Header :zIndex="3" ref="Header"></Header>
        <div class="content-wrap">
        <center>
            <div class="top">
            <ul class="daohang_list">
                <li><router-link class="list_item" :to="{ path: '/Create' }">创建活动</router-link></li>
                <li><router-link class="list_item" :to="{ path: '/Manage' }">投票管理</router-link></li>
                <li><router-link class="list_item" :to="{ path: '/Level' }">账户升级</router-link></li>
                <li><router-link class="list_item on" :to="{ path: '/Userinfo' }">个人中心</router-link></li>
                <li><router-link class="list_item" :to="{ path: '/Invate' }">推荐有奖</router-link></li>
            </ul>
            </div>
            <div class="info_box">
                <div class="left">
                    <div class="grzl">个人中心</div>
                    <ul class="nav_child">
                    <li><router-link :to="{ path: '/Userinfo' }">个人信息</router-link></li>
                    <li><router-link :to="{path: '/Account'}">收款信息</router-link></li>
                    <li><router-link class="on" :to="{path: '/Address'}">收件地址</router-link></li>
                    <li><router-link :to="{path: '/Invoice'}">发票信息</router-link></li>
                    <li><router-link :to="{path: '/InvoiceRecord'}">发票管理</router-link></li>
                    <li><router-link :to="{path: '/DrawList'}">提现记录</router-link></li>
                    <li><router-link :to="{ path: '/Logs' }">消费记录</router-link></li>
                    <li><router-link :to="{ path: '/Editpass' }">修改密码</router-link></li>
                    </ul>
                </div>
                <div class="iinforignt">
                    <el-row style="margin:3% 2% 2% 3%;text-align:left">
                        <el-col :span="24">
                            <el-button icon="el-icon-plus" type="primary" @click="addAddr">添加地址</el-button>
                        </el-col>
                    </el-row>
                    <el-table
                        :data="data"
                        border
                        style="width: 95%;margin:2%">
                        <el-table-column prop="recvName" label="收件人" width="140">
                        </el-table-column>
                        <el-table-column prop="recvPhone" label="联系电话" width="140">
                        </el-table-column>
                        <el-table-column label="收件地址">
                            <template slot-scope="scope">
                                <p>{{scope.row.recvAddr}}</p>
                                <el-row class="tools">
                                    <el-col :span="6">
                                        <el-tag size="mini" v-if="scope.row.state==2">默认地址</el-tag>
                                        &nbsp;
                                    </el-col>
                                    <el-col :span="18" class="btns">
                                        <el-button size="mini" type="text" icon="el-icon-check" @click="setDefault(scope.row.id)" plain v-if="scope.row.state!=2">设为默认地址</el-button>
                                        <el-button size="mini" type="text" plain icon="el-icon-edit" @click="editAddr(scope.row)">编辑</el-button>
                                        <el-button size="mini" type="text" icon="el-icon-delete" @click="delAddr(scope.row.id)" plain>删除</el-button>
                                    </el-col>
                                </el-row>
                            </template>
                        </el-table-column>
                    </el-table>
                </div>
                <div class="clear"></div>
            </div>
            <el-dialog :title="dlgTitle" :visible.sync="showDlg">
                <el-form :label-width="100">
                    <el-form-item label="收件人">
                        <el-input v-model="addrObj.recvName" placeholder="收件人姓名" maxlength="20"></el-input>
                    </el-form-item>
                    <el-form-item label="联系电话">
                        <el-input type="tel" v-model="addrObj.recvPhone" maxlength="30" placeholder="联系电话"></el-input>
                    </el-form-item>
                    <el-form-item label="收件地址">
                        <el-input v-model="addrObj.recvAddr" placeholder="收件详细地址" maxlength="100"></el-input>
                    </el-form-item>                    
                </el-form>
                <div slot="footer" class="dialog-footer">
                    <el-button @click="showDlg = false">取 消</el-button>
                    <el-button type="primary" @click="updateAddr">确定</el-button>
                </div>
            </el-dialog>
        </center>
        </div>
        <Footer></Footer>
    </div>
</template>
<script>
import User from '../../utils/user'
import Ajax from '../../utils/ajax'
import Footer from '../components/Footer.vue'
import Header from '../components/Header.vue'

export default {
    name:'Address',
    components: {
        Header,
        Footer
    },
    data(){
        return {
            data:[],
            addrObj:{
                recvName: '',
                recvPhone: '',
                recvAddr: '',
                id: 0
            },
            showDlg: false,
            dlgTitle: ''
        }
    },
    created(){
        if(!User.getToken() || !User.getInfo()) {
            this.$router.replace('/Login');
            return;
        }
        this.setTitle('收件地址');
        this.loadInfo();
    },
    methods: {
        loadInfo(){
            Ajax.get('member/address').then(res=>{
                if(res.code == 0){
                    this.data = res.data;
                } else {
                    this.$alert(res.msg);
                }
            }).catch(err=>{
                console.error(err);
                this.$alert('获取数据失败');
            })
        },
        editAddr(item){ 
            this.addrObj =  {
                recvName: item.recvName,
                recvPhone: item.recvPhone,
                recvAddr: item.recvAddr,
                id: item.id,
                memberId: item.memberId
            };
            this.dlgTitle = "编辑收件地址";
            this.showDlg = true;
        },
        updateAddr(){
            if(!this.addrObj.recvName) {
                this.$alert('收件人姓名不能为空');
                return;
            }
            if(!this.addrObj.recvPhone) {
                this.$alert('收件人联系电话不能为空');
                return;
            }
            if(!this.addrObj.recvAddr){
                this.$alert('收件地址不能为空');
                return;
            }
            Ajax.post('member/update/address', this.addrObj).then(res=>{
                this.showDlg = false;
                if(res.code == 0){
                    this.loadInfo();
                } else {
                    this.$alert(res.msg);
                }
            }).catch(err=>{
                this.showDlg = false;
                console.error(err);
                this.$alert('收件地址保存失败');
            })
        },
        addAddr(){
            this.addrObj = {
                recvName: '',
                recvPhone: '',
                recvAddr: '',
                memberId: 0,
                id: 0
            };
            this.dlgTitle = "添加收件地址";
            this.showDlg = true;
        },
        setDefault(id) {
            if(id){
                Ajax.post('member/update/default/address/' +id).then(res=>{
                    if(res.code == 0){
                        this.$alert('设置成功');
                        this.loadInfo();
                    } else {
                        this.$alert(res.msg);
                    }
                }).catch(err=>{
                    console.error(err);
                    this.$alert('设置失败');
                })
            }
        },
        delAddr(id){
            this.$confirm('确定要删除该收件地址吗？', '确认').then(()=>{
                Ajax.delete('member/delete/address/' + id).then(res=>{
                    if(res.code == 0){
                        this.$alert('删除成功');
                        this.loadInfo();
                    } else {
                        this.$alert(res.msg);
                    }
                }).catch(err=>{
                    console.error(err);
                    this.$alert('删除失败');
                })
            });
        }

    }
}
</script>
<style scope>
.tools {
    vertical-align: middle;
}
.tools .el-tag {
    margin-top:5px;
}
.tools .btns {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: flex-end;
    align-content: center;
    align-items: center;
}
.tools .btns .el-button--text {
    margin-left:10px;
}
.tools .btns .el-button--text,
.tools .btns .el-button--text:hover {
    border:none;
    background:none;
}
</style>
<style src="@/assets/css/manage.css"  scoped></style>
<style src="@/assets/css/userinfo.css"  scoped></style>
